<template>
	<view>
		<u-popup :show="show" mode="bottom" @close="close" @open="open" closeable>
			<view class="padding-xs">
				<view class="bg-white padding">
					<view class="text-center text-xl text-black margin-bottom">请选择项目</view>
					<view class="project-list bg-white radius-xl">
						<view class="item radius-lg padding-xs padding-tb solid-bottom" v-for="(item, index) in list"
							:key="index">
							<image :src="item.thumb" mode="aspectFill" class="img" v-if="item.thumb"></image>
							<view class="probox">
								<view class="title text-bold text-black">
									<text>{{ item.title }}</text>
									<view class="text-sm text-right cost text-red">
										<text class="text-bold">¥</text>
										<text class="text-lg text-bold"
											v-if="item.overtime_separate">{{ item.overtime_price }}</text>
										<text class="text-lg text-bold" v-else>{{ item.price }}</text>
									</view>
								</view>
								<view class="text-gray text-sm margin-bottom-xs">{{ item.tips }}</view>
								<view class="price flex flex-wrap">
									<view class="time basis-sm text-sm">
										<text class="cuIcon-timefill text-lg themeColor"></text>
										<text class="padding-left-mn"
											v-if="item.overtime_separate">{{ item.overtime_duration }}分钟</text>
										<text class="padding-left-mn" v-else>{{ item.service_duration }}分钟</text>
									</view>
									<view class="basis-lg text-right liji">
										<u-number-box button-size="20" v-model="item.num" min="0" :name="index"
											style="float: right;">
										</u-number-box>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="total crow solid-top padding-top-sm">
						<view>
							<view>
								合计 :
								<text class="text-red">￥</text>
								<text class="text-xl text-red text-bold">{{ price_sum }}</text>
							</view>
							<view v-if="remaining_minutes>0" class="padding-top-sm">
								<text class="text-gray text-sm">当前技师最多可加钟{{ remaining_minutes }}分钟</text>
							</view>
						</view>
						<view class="submit">
							<button class="cu-btn round china-btn-bg" @click="submit()">
								<text class="padding-lr">提交</text>
							</button>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<payType :show="payTypeShow" :orders-type="form.type" @payCallBack="payCallBack" :price="price_sum" />
	</view>
</template>

<script>
export default {
	props: {
		show: {
			type: Boolean,
			default: false,
		},
		remaining_minutes:{
			type: Number,
			default: 0,
		},
		projects: {
			type: Array,
			default: []
		},
		appointment_service_id: {
			type: [Number, String],
			default: 0,
		}
	},
	data() {
		return {
			payTypeShow: false,
			form: {
				type: 'overtime',
				pay_type: '',
				appointment_service_id: this.appointment_service_id,
				project: [],
			},
			orders: {},
			list: [],
			current_page: 1,
		};
	},
	watch: {
		show(e) {
			if (e) {
				this.list = this.projects;
			}
		}
	},
	computed: {
		price_sum() {
			let price = 0;
			for (let i = 0; i < this.list.length; i++) {
				const item = this.list[i];
				if (item.num > 0) {
					if (item.overtime_separate) {
						price += item.overtime_price * item.num;
					} else {
						price += item.price * item.num;
					}
				}
			}
			return price.toFixed(2);
		}
	},
	methods: {
		submit() {
			this.form.platform = this.$utils.$system.platform();
			let project = this.list;
			let array = [];
			for (let i = 0; i < project.length; i++) {
				if (project[i].num > 0) {
					array.push({ num: project[i].num, apps_id: project[i].apps_id })
				}
			}
			if (array.length <= 0) {
				this.$utils.$message.error('请选择项目');
				return;
			}
			this.form.project = array;
			this.payTypeShow = true;
		},
		payCallBack(pay_type) {
			this.payTypeShow = false;
			if (pay_type) {
				this.form.pay_type = pay_type;
				if (this.orders.trade) {
					this.getPayInfo();
				} else {
					this.getOrdersInfo();
				}
			}
		},
		getPayInfo() {
			uni.showLoading({
				title: '获取订单中...',
				mask: true
			})
			this.$utils.$api.Orders.payByOrders({
				trade: this.orders.trade,
				platform: this.form.platform,
				pay_type: this.form.pay_type
			}).then((res) => {
				if (res.data.order && res.data.order.trade) {
					this.orders = res.data.order
				}
				this.pay(res);
			}).catch(err => {
				this.$utils.$message.error(err.msg);
				if (err.data && err.data.trade) {
					this.orders = err.data
				} else {
					this.orders = {
						trade: '',
					};
				}
			}).finally(() => {
				uni.hideLoading();
			})
		},
		getOrdersInfo() {
			uni.showLoading({
				title: '获取订单中...',
				mask: true
			})
			this.$utils.$api.Orders.create(this.form).then((res) => {
				if (res.data.order && res.data.order.trade) {
					this.orders = res.data.order
				}
				this.pay(res);
			}).catch(err => {
				this.$utils.$message.error(err.msg);
				if (err.data && err.data.trade) {
					this.orders = err.data
				}
			}).finally(() => {
				uni.hideLoading();
			})
		},
		pay(res) {
			if (res.code === this.$utils.$http.ResponseCode.SUCCESS) {
				setTimeout(() => {
					uni.showLoading({
						title: '查询中...',
						mask: true
					});
					this.$utils.usePay(res.data).then(() => {
						uni.$emit('UPDATE::ORDER');
						this.$emit('update');
						this.$utils.$api.User.userinfo(this, true);
						this.close();
					}).catch(err => {
						if (err && err.msg) {
							this.$utils.$message.error(err.msg);
						}
					}).finally(() => {
						uni.hideLoading();
					});
				}, 300)
			} else if (res.code === this.$utils.$http.ResponseCode.PAY_SUCCESS) {
				uni.$emit('UPDATE::ORDER');
				this.$emit('update');
				this.$utils.$api.User.userinfo(this, true);
				this.close();
			}
		},
		close() {
			this.$emit('close')
		},
		open() { },
	}
}
</script>

<style lang="less" scoped>
.project-list {
	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		height: 160upx;

		.img {
			width: 110upx;
			height: 110upx;
			border-radius: 10upx;
		}

		.probox {
			width: 80%;

			.title {
				display: flex;
				justify-content: space-between;
				align-items: baseline;

				.cost {
					width: 125upx;
				}
			}
		}
	}
}

.crow {
	justify-content: space-between;
}
</style>
